龙猫 Studio.

Material Design の Android icons

MD
Word count: 460Reading time: 1 min
2019/09/22 Share

Material Design の Android icons

原文链接

使用

下面的设计原则是关于 Android 图标的视觉体验，动画和行为。

载入图标

载入图标是提供给 google play 的图片资源，需要注意一下要求：

  • PNG格式或者矢量图格式
  • 背景层和前景层不能有遮罩或者背景阴影
  • 每个图层需要超过整体区域的50%

OEM的要求如下：

  • 展现在OEM平台的一个单独的图形
  • 一个外层阴影(可选)

骨架图

所有的图标应该按照这个骨架图来保证视觉样式的统一性。

**正方形** 宽：44dp 高：44dp 圆角：4dp
**圆形** 直径：52dp
**竖向矩形** 高：52dp 宽：36dp 圆角：4dp
**横向矩形** 高：36dp 宽：52dp 圆角：4dp

规格

层级

图标包含两层：前景图和背景图。每层都可以展示动画和独立处理。

**前景图（视差滚动）** 108x108 dp 72dp 的遮罩截面 推荐透明 **背景图（精细视差）** 108x108 dp 72dp masked section 不透明 ## 阴影 当设计图标的时候，光影之间的对比应该保持一致。阴影的界限能够让元素从背景中区分出来。 透明度：20% X 偏移：0dp Y 偏移：4dp 高斯模糊半径：4dp 颜色：和填充色、阴影值有关
阴影的界限应该是柔和的。

边缘填充和颜色

为了提供一种深度感，对元素的顶部和底部的边缘进行了处理。

  • 颜色填充头部边缘并且高亮
  • 底部边缘阴影显示

着色边缘
高度：1dp
透明度：20%
颜色：白色

阴影边缘 高度：1dp 透明度：20% 颜色：颜色、阴影

终点层

终点层固定在前景层上。

规格

圆角：45度
中心：32%
颜色：填充色、边缘和阴影

Author：longmao

原文链接：https://longmao0701.github.io/2019/09/22/Material Design の Android icons/

发表日期：September 22nd 2019, 1:41:50 pm

更新日期：September 22nd 2019, 10:29:31 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 使用
    1. 1.1. 载入图标
  2. 2. 骨架图
  3. 3. 规格
    1. 3.1. 层级
    2. 3.2. 边缘填充和颜色
    3. 3.3. 终点层
      1. 3.3.1. 规格
Total : 9
2019
design MD 交互